<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
  {{}}    插值语法不会覆盖原有内容  但是插值语法不能识别html标签
  v-html  指令完成内容的渲染     会将标签中原有的内容覆盖   可以识别html标签
  v-text  指令完成内容的渲染     会将标签中原有的内容覆盖   不能识别html标签
   以上的标识符 会被vue实例解析

-->
<div id="app">
    <p v-html="info">这里的内容需要被替换</p>
    <p v-text="info">这里的内容需要被替换</p>
    <div>
        <h1>{{msg.toUpperCase()}}</h1>
        <h1>{{msg}}</h1>
        <h1>{{number>1}}</h1>
    </div>
</div>

<script src="../vue.js"></script>
<script>
   const vm = new Vue({
       el:'#app',
       data:{
           msg:'hello vue',
           info:'<h1> hello world</h1>',
           number:20
       },
       methods:{}
   })
</script>
</body>
</html>